<template>
  <div class="container">
    <a-page-header
      style="background-color: #fff;margin-bottom: 16px"
      @back="() => $router.back()"
    >
      <template #title>
        <span :style="{ fontSize: '14px' }">返回上一页</span>
      </template>
      <template #extra>
      <a-button shape="circle" @click="shareEvent"><share-alt-outlined /></a-button>
    </template>
    </a-page-header>
    <a-card :bordered="false" :headStyle="{ textAlign: 'center' }">
      <template #title>
        <a-image :width="260" :src="content.imgUrl" alt="文章图片" />
        <a-typography-title
          v-model:content="content.title"
          :level="3"
          ellipsis
          style="margin: 16px 0; letter-spacing: 2px"
        ></a-typography-title>

        <div class="second_tag">
          <div>
            <icon :style="{ color: '#e6a741' }">
              <template #component>
                <svg
                  t="1647856584426"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2344"
                  width="1em"
                  height="1em"
                >
                  <path
                    d="M511.435945 302.584307m-302.584307 0a302.584307 302.584307 0 1 0 605.168614 0 302.584307 302.584307 0 1 0-605.168614 0Z"
                    fill="currentColor"
                    p-id="2345"
                  ></path>
                  <path
                    d="M803.763157 603.459098c-23.933222-18.804674-58.123539-17.095159-80.347245 5.128548-54.704508 54.704508-129.923205 88.894825-213.689483 88.894825s-158.984975-34.190317-213.689482-88.894825c-22.223706-22.223706-56.414023-25.642738-80.347245-5.128548C123.375845 682.096828 54.995211 782.958264 32.771505 921.429048c-8.547579 56.414023 30.771285 102.570952 88.894824 102.570952H902.915077c56.414023 0 97.442404-46.156928 88.894825-102.570952-23.933222-138.470785-92.313856-239.33222-188.046745-317.96995z"
                    fill="currentColor"
                    p-id="2346"
                  ></path>
                </svg>
              </template>
            </icon>
            <span>{{ content.nickname }}</span>
          </div>
          <div>
            <heart-two-tone twoToneColor="pink" />
            <span>{{ content.collection }}</span>
          </div>
          <div>
            <a-tag
              v-for="tabItem in content.tabs"
              :key="tabItem"
              :color="tabItem.color"
              >{{ tabItem.name }}</a-tag
            >
          </div>
          <div>
            <field-time-outlined :style="{ color: '#1890ff' }" />
            <span>{{ content.createdTime }}</span>
          </div>
        </div>
      </template>
      <a-row type="flex" :gutter="2">
        <a-col :flex="2">
          <div class="nav_sidebar">
            <a-card hoverable>
              <template #title>
                <h3 :style="{ letterSpacing: '4px',margin: '0',fontWeight: 'bold' }">目录导航</h3>
              </template>
              <div
                v-for="(anchor,index) in titles"
                :key="index"
                :style="{ padding: `0px 0 0px ${anchor.indent * 20}px` }"
                @click="handleAnchorClick(anchor)">
                <a-typography-title class="title_h" :level="4">{{ anchor.title }}</a-typography-title>
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :flex="3">
          <v-md-preview-html
            :html="html"
            ref="preview"
            preview-class="vuepress-markdown-body"
            @copy-code-success="handleCopyCodeSuccess"
          ></v-md-preview-html>
        </a-col>
      </a-row>
    </a-card>
    <a-back-top />
  </div>
</template>

<script setup>
import { toRefs, reactive, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import Icon, { FieldTimeOutlined, HeartTwoTone,ShareAltOutlined } from "@ant-design/icons-vue";
import VueMarkdownEditor, { xss } from "@kangc/v-md-editor";

const { query } = useRoute();

let preview = ref();

onMounted(() => {
  const anchors = preview.value.$el.querySelectorAll("h1,h2,h3,h4,h5,h6");
  titles.value = Array.from(anchors).filter((title) => !!title.innerText.trim());
  if (!titles.value.length) {
    titles.value = [];
    return;
  }
  const hTags = Array.from(
    new Set(titles.value.map((title) => title.tagName))
  ).sort();

  titles.value = titles.value.map((el) => ({
    title: el.innerText,
    lineIndex: el.getAttribute("data-v-md-line"),
    indent: hTags.indexOf(el.tagName),
  }));
});

let content = JSON.parse(decodeURIComponent(query.pageId));

let text = `
## :sunglasses:Bash
\`\`\`bash 
# yarn
yarn add vite-plugin-prismjs --dev

# npm
npm install vite-plugin-prismjs
\`\`\`
### :heart_eyes:JS
\`\`\`js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';

VueMarkdownEditor.use(vuepressTheme);

Vue.use(VueMarkdownEditor);
\`\`\`
## :scream:Json
\`\`\`json
{
  "key": "value"
}
\`\`\`
## :sob:vue
\`\`\`vue
\<template\>\<\/template\>

\<script\>
export default \{\}
\<\/script\>
\`\`\`
### :scream_cat:img
![](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg){{{width="100%" height="auto"}}}
#### :innocent:tip
::: tip
  你可以点击 toolbar 中的 tip 来快速插入
:::

::: warning
  这是一段警告
:::

::: danger
  这是一个危险警告
:::

::: details
  这是一个详情块，在 IE / Edge 中不生效
:::

::: tip 自定义标题
  你也可以自定义块中的标题
:::

::: danger STOP
  危险区域，禁止通行
:::

`;

const html = xss.process(
  VueMarkdownEditor.vMdParser.themeConfig.markdownParser.render(text)
);

let data = reactive({
  titles: []
});

let { titles } = toRefs(data);

function handleCopyCodeSuccess(code) {
  console.log(code);
}
function handleAnchorClick(anchor) {
  const { lineIndex } = anchor;
  const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
  if (heading) {
    preview.value.scrollToTarget({
      target: heading,
      scrollContainer: window,
      top: 70,
    });
  }
}
function shareEvent (){
  console.log('分享');
}
</script>

<style scoped>
.container {
  max-width: 1366px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 0;
  box-sizing: border-box;
}
.second_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.second_tag > div {
  margin: 5px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
.second_tag > div > span {
  margin: 0 3px;
}
.second_tag > div:first-child span:last-child {
  vertical-align: text-top;
}
.v-md-editor-preview :deep(.vuepress-markdown-body) {
  padding-top: 0;
}
.nav_sidebar{
  position: sticky;
  top: 60px;
  padding-bottom: 16px;
}
.title_h{
  transition:  all .6s;
  height: 28px;
}
.title_h:hover{
  cursor: pointer;
  color: #2286f6;
  font-size: 21px;
}
.ant-page-header{
  padding: 6px 24px;
}
</style>